import React from 'react';
import { NavBar, Icon,Carousel,Toast } from 'antd-mobile';
const BMap=window.BMap
class Detail extends React.Component {
    state={
        houseInfo:{
                title:'',
                houseImg:[],
                tags:[],
                community:'',
                coord:{},
                description:"",
                floor:"",
                houseCode:'',
                oriented:[],
                price:'',
                roomtype:"",
                size:'',
                supporting:[]
        },// 房屋详情
        isLoad:0,// 是否得到数据
        iscoll:0// 是否收藏
    }

//     community: "东方瑞景"
// coord: {latitude: "39.912338", longitude: "116.449979"}
// description: "【户型介绍】 本房楼层高，三居室，南北通透，采光充足，视野开阔，可眺望小区内花园。主卧有独立卫生间，干湿分离，客厅面积大，市政集中供暖，民水民电，3梯10户。 【交通出行】 长安街沿线，交通方便，距离1号线建国.门地铁站直线距离706米（来源于百度地图），距离1号线永安里站直线距离657米（来源于百度地图）。附近有日坛站，途经公交有1路，9路，43路，58路等。 【周边配套】 附近有赛特购物中心，幸福超市，门口就是农业银行，美食城配套设施完备，附近还有光大银行、友利银行、中国银行等多家银行，距离儿研所医院1.2公里。 【小区介绍】 东方瑞景小区2004年建成，小区二层有花园，环境优美，地下有停车场，车位充足，物业集中供暖，可以改地暖，小区出入有门禁，24小时安保。"
// floor: "高楼层"
// houseCode: "5cc4494549926d0e2b94c7d0"
// houseImg: (12) ["http://e.ludir.cn/api/hkzf/public/static/newImg/7big1e86j.jpg", "http://e.ludir.cn/api/hkzf/public/static/newImg/7bkl0g8k7.jpg", "http://e.ludir.cn/api/hkzf/public/static/newImg/7bkc3jllh.jpg", "http://e.ludir.cn/api/hkzf/public/static/newImg/7bk4h0c4p.jpg", "http://e.ludir.cn/api/hkzf/public/static/newImg/7bhf229dg.jpg", "http://e.ludir.cn/api/hkzf/public/static/newImg/7bj76cdfp.jpg", "http://e.ludir.cn/api/hkzf/public/static/newImg/7bl1ili6o.jpg", "http://e.ludir.cn/api/hkzf/public/static/newImg/7bl2hold0.jpg", "http://e.ludir.cn/api/hkzf/public/static/newImg/7bi7oeh6m.jpg", "http://e.ludir.cn/api/hkzf/public/static/newImg/7bj477ie6.jpg", "http://e.ludir.cn/api/hkzf/public/static/newImg/7bia3jb86.jpg", "http://e.ludir.cn/api/hkzf/public/static/newImg/7bj5e3mc4.jpg"]
// oriented: (2) ["南", "北"]
// price: 22000
// roomtype: "三室"
// size: 110
// supporting: [""]
// tags: (3) ["近地铁", "集中供暖", "随时看房"]
// title: 

    renderMap(jw){
        console.log(jw);
        let wj=jw.reverse()
        console.log(wj);
        let labels=JSON.parse(localStorage.getItem("cityinfo")).name
        const map = new BMap.Map('map')
        // var map = new BMapGL.Map("container");
        // 创建地图实例 
        var point = new BMap.Point(...wj);
        // 创建点坐标 
        map.centerAndZoom(point, 30);
        // console.log(BMap);
        // return
            // const myGeo = new BMap.Geocoder()
            // // 将地址解析结果显示在地图上，并调整地图视野
            // myGeo.getPoint(
            //         labels,
            //         async point => {
            //             if (point) {
            //             //  初始化地图
            //             map.centerAndZoom(point, 30)
            //             // 添加常用控件
                        map.addControl(new BMap.NavigationControl())
                        map.addControl(new BMap.ScaleControl())
                
            //             }
            //         },
            //         labels
            //     )
            //     const areaPoint = new BMap.Point(...wj)// 初始坐标 经，纬
                const label = new BMap.Label('', {
                       position: point,
                       offset: new BMap.Size(-35, -35)// 根据自定义物体大小 设置中心点
                  })
                          
            //      // 给 label 对象添加一个唯一标识
                label.id = 666
                label.setContent(`<div >${this.state.houseInfo.community}</div>`)
                map.addOverlay(label)// 添加自定义
    }
    render() { 
        let {
            houseInfo:{// 房源信息
                title,
                houseImg,
                tags,
                community,
                coord,
                description,
                floor,
                houseCode,
                oriented,
                price,
                roomtype,
                size,
                supporting
            },
            isLoad,// 数据是否加载
            iscoll
        }=this.state
       
        return <div>
            <NavBar
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={() =>{this.props.history.go(-1)}}          
            >房屋详情</NavBar>
            {/* 轮播 */}
            {
                isLoad?
                <Carousel
                    autoplay={true}
                    infinite
                    autoplayInterval={1000}
                    
                    >
                    {
                    houseImg.map(v =>{
                    return <img
                        src={v}
                        alt=""
                        style={{
                            height:"250px"
                        }}
                    />
                    } )
            
            
            }
        </Carousel>:
        ''
            } 


            {/* 标题 */}
           <div style={{
               background:"white",
               borderBottom:"1px solid #fff1f1",
               overflow:"hidden",
               padding:"5px",
               boxSizing:"border-box"
           }}>
              <h3>
                {title}
             </h3>
             <div style={{
                 height:"40px"
             }}>
                 {
                   tags.map((v,k)=>{
                        return <span style={{
                            boxSizing:"border-box",
                            padding:"3px",
                            margin:"3px",
                            background:k%2==0?"pink":'skyblue',
                            borderRadius:"2px",
                            color:"white"
                        }}>
                            {v}
                        </span>
                    })
                   
                 }
             </div>
           </div>
           
            {/* 简介1 */}
            <div style={{
                background:"white",
                display:"flex",
                justifyContent:"space-around",
                borderBottom:"1px solid #fff1f1",

            }}>
                <div style={{
                    textAlign:"center"
                }}>
                    <h3 style={{
                        color:"orange"
                    }}>{price}/月</h3>
                    <p>租金</p>
                </div>
                <div style={{
                    textAlign:"center"
                }}>
                    <h3 style={{
                        color:"orange"
                    }}>{roomtype}</h3>
                    <p>房型</p>
                </div>
                <div style={{
                    textAlign:"center"
                }}>
                    <h3 style={{
                        color:"orange"
                    }}>{size}平米</h3>
                    <p>面积</p>
                </div>
            </div>

            {/* 介绍2 */}
            <div style={{
                background:"white",
                display:"flex",
                justifyContent:"space-around",
                flexWrap:"wrap",
                borderBottom:"1px solid #fff1f1",

            }}>
                <div style={{
                    width:"180px",
                    height:"40px",
                    textAlign:"center",
                    lineHeight:"40px"

                }}>
                    <span style={{color:"gray"}}>装修</span>：<span>精修</span>
                </div>
                <div style={{
                    width:"180px",
                    height:"40px",
                    textAlign:"center",
                    lineHeight:"40px"
                }}>
                    <span style={{color:"gray"}}>楼层</span>：<span>{floor}</span>
                </div>
                <div style={{
                    width:"180px",
                    height:"40px",
                    textAlign:"center",
                    lineHeight:"40px"
                }}>
                    <span style={{color:"gray"}}>朝向</span>：<span>{oriented}</span>
                </div>
                <div style={{
                    width:"180px",
                    height:"40px",
                    textAlign:"center",
                    lineHeight:"40px"
                }}>
                    <span style={{color:"gray"}}>类型</span>：<span>普通住宅</span>
                </div>
            </div>
             
             {/* 地图 */}
             <div style={{
                 background:"white",
                 marginTop:"10px",
                 padding:"5px",
                 boxSizing:"border-box"
             }}>
                 <div>
                     <h3>小区：{community}</h3>
                 </div>
                 <div style={{
                     height:"300px"
                 }} id="map">
                    
                 </div>
             </div>

             <div style={{
                 background:"white",
                 padding:"5px",
                 boxSizing:"border-box"
             }}>
                <h3>房源概况</h3>
                <div>
                    {description}
                </div>
             </div>

             {/* 收藏 */}
              <div style={{height:"50px"}}></div>
             <div style={{
                 position:"fixed",
                 width:"100%",
                 bottom:0,
                 height:"50px",
                 borderTop:"1px solid grey",
                 background:"#eeeeee",
                 display:"flex"
             }}>
                 <div
                  onClick={()=>{
                      if(!isLoad){
                        Toast.info('数据还未加载完毕', 1);
                         return
                      }
                    //   console.log(666);
                      // 组合要收藏的对象
                      let houseobj={
                          title,
                          price,
                          roomtype,
                          size,
                          houseCode,
                          houseImg:houseImg[0],
                          tags
                      }
                      console.log(houseobj);
                      // 判断本地存储有没有
                      let housecoll=localStorage.getItem("housecoll")
                      if(housecoll){// 有添加过收藏
                         housecoll=JSON.parse(housecoll)
                         console.log(housecoll);
                         let t=housecoll.some(v=>v.houseCode==houseCode)
                         console.log(t);
                         if(t){// 代表此房源已经被收藏 再次点击代表取消收藏 
                            // 移出本地缓存  filter 过滤数组
                            let ncoll=housecoll.filter(v=>v.houseCode!=houseCode)
                            console.log(ncoll);
                            // 移出本地缓存之后再重新存一遍
                            localStorage.setItem("housecoll",JSON.stringify(ncoll))
                            // 更新iscoll
                            // this.checkcoll()
                            this.setState({
                                iscoll:0
                            })


                         }else{// 房源没有被收藏过
                            housecoll.push(houseobj)// 收藏
                            // 更新本地缓存
                            localStorage.setItem("housecoll",JSON.stringify(housecoll))
                            // this.checkcoll()
                            this.setState({
                                iscoll:1
                            })

                         }


                      }else{// 没有添加过收藏 第一次收藏
                        let narr=[]// 声明空数组 放收藏的房源信息
                        narr.push(houseobj)// 添加收藏的房源
                        localStorage.setItem("housecoll",JSON.stringify(narr))
                        // 更新状态
                        this.setState({
                            iscoll:1
                        })
                      }
                  }}
                  style={{
                     flex:1,
                     borderRight:"1px solid grey",
                     height:"50px",
                     textAlign:"center",
                     lineHeight:"50px",
                     fontSize:"20px"
                     }}>
                         {
                             iscoll?
                             <div style={{color:"orange"}}>
                                 <i className="iconfont icon-Collection"></i>
                                 已收藏
                             </div>
                             :
                             <div>
                                 <i className="iconfont icon-coll"></i>
                               收藏
                             </div>
                         }
                     </div>
                     <div style={{
                     flex:1,
                     borderRight:"1px solid grey",
                     height:"50px",
                     textAlign:"center",
                     lineHeight:"50px",
                     fontSize:"20px"
                     }}>
                         在线客服
                     </div>
                     <div style={{
                     flex:1,
                    //  borderRight:"1px solid grey",
                     height:"50px",
                     textAlign:"center",
                     lineHeight:"50px",
                     fontSize:"20px"
                     }}>
                         <a style={{color:"black"}} href="tel:13212742015">电话预约</a>
                     </div>
             </div>
        </div>;
    }
    getDet(){
        this.api.getDet(this.props.match.params)
        .then(res=>{
            console.log(res);
            if(res.data.code==200){
                let obj=res.data.msg.coord

               
                this.setState({
                    houseInfo:res.data.msg,
                    isLoad:1
                })
                console.log(this.state.houseInfo);
                this.renderMap(Object.values(obj))

                this.checkcoll(res.data.msg.houseCode)
            }
        })
    }
    // 验证是否收藏的方法
    checkcoll(houseCode){// 当前浏览房源的id
        let housecoll = localStorage.getItem("housecoll")

        if(housecoll){
           housecoll=JSON.parse(housecoll)
        //    console.log(housecoll);
           let t=housecoll.some((v,k)=>v.houseCode==houseCode)
           console.log(t);
           this.setState({
               iscoll:t?1:0
           })
        }
    }
    componentDidMount(){
        // console.log(this.props.match.params);// 获取列表传过来的参数
        this.getDet()
        
    }
}
 
export default Detail;